<template>
  <a-modal
    :title="title"
    :width="850"
    :visible="visible"
    :destroyOnClose="true"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="ok" type="primary" @click="handleCancel">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div>
        <div class="modal-operations">
          <a-button type="primary" icon="plus" @click="handleAddAccountModal()">添加新账号</a-button>
        </div>
        <a-table
          :columns="accountColumns"
          :rowKey="record => record.pid"
          :dataSource="accountsData"
          :pagination="paginations"
        >
          <span slot="action" slot-scope="text, record">
            <template>
              <a v-if="record.accountType === 'passwd'" @click="handleRestPasswd(record)">重置密码</a>
              <a-divider type="vertical" />
              <a @click="handleDelAccount(record)">删除</a>
              <a-divider type="vertical" />
            </template>
          </span>
          <template slot-scope="accountTypes">
            <span>
              <a-tag v-for="tag in accountTypes" color="blue" :key="tag">{{ accountType }}</a-tag>
            </span>
          </template>
        </a-table>
      </div>
    </a-spin>
    <!-- <a-modal
      :title="添加新账号"
      :width="850"
      :visible="visible"
      :destroyOnClose="true"
      @cancel="handleCancel"
    >
    </a-modal> -->
    <AccountNew-modal ref="AccountNewModal" @ok="handleAccountNewModalOk" />
    <AccountRest-modal ref="AccountRestModal" />
  </a-modal>
</template>

<script>
import { getAccountByPersonPid, getAccountCountByPersonPid, delAccount } from '../account'
import AccountNewModal from './AccountNewModal'
import AccountRestModal from './AccountRestModal'

export default {
  name: 'AccountModal',
  components: {
    AccountNewModal,
    AccountRestModal
  },
  props: {
  },
  data () {
    return {
      // form: this.$form.createForm(this),
      title: '人员账号表',
      personPid: '0',
      confirmLoading: false,
      visible: false,
      paginations: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      // accountTypes: ['passwd'],
      accountColumns: [
        {
          title: '应用名称',
          dataIndex: 'appId',
          customRender: function (text) {
            if (text === 'huiwcore') {
              return '平台应用'
            } else {
              return text
            }
          }
        },
        {
          title: '昵称',
          dataIndex: 'accountName'
        },
        {
          title: '账号名',
          dataIndex: 'accountId'
        },
        {
          title: '账号类型',
          dataIndex: 'accountType',
          customRender: function (text) {
            if (text === 'passwd') {
              return '账号密码'
            } else if (text === 'wx') {
              return '微信授权'
            } else if (text === 'wxXcx') {
              return '微信小程序'
            } else if (text === 'wxWork') {
              return '企业微信'
            } else if (text === 'aliPay') {
              return '支付宝授权'
            } else if (text === 'aliXcx') {
              return '支付宝小程序'
            } else {
              return text
            }
          }
        },
        {
          title: '到期时间',
          dataIndex: 'expireTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      accountsData: []
    }
  },
  beforeCreate () {
  },
  created () {
  },
  methods: {
    showTotal (total) {
      return `共 ${total} 条`
    },
    showModal (personPid) {
      this.personPid = personPid
      this.getAccount(personPid)
      this.visible = true
    },
    getAccount (personPid) {
      this.confirmLoading = true
      if (personPid) {
        new Promise((resolve) => {
          resolve(getAccountByPersonPid(personPid, {}, 10, 1))
        }).then(res => {
          if (res.code === 'C1') {
            this.accountsData = res.data
          }
          this.confirmLoading = false
        })
        getAccountCountByPersonPid(personPid, {})
          .then(res => {
            if (res.code === 'C1') {
              this.paginations.total = res.data
              this.paginations.showTotal = this.showTotal
            }
          })
      }
    },
    handleDelAccount (record) {
      const _this = this
      if (record.pid) {
        _this.$confirm({
          title: '确定删除?',
          content: '该操作将删除该账号,删除后无法再使用该登录方式登录系统',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          // onCancel () {
          // }
          onOk () {
            new Promise((resolve) => {
              resolve(delAccount({ pid: record.pid, sysSeq: record.sysSeq }, {}))
            }).then(res => {
              if (res.code === 'C1') {
                _this.$message.success('账号已删除', 3)
                _this.getAccount(_this.personPid)
                // console.log(this.treeData)
              }
            })
          }
        })
      }
    },
    handleCancel () {
      this.$emit('close')
      this.visible = false
    },
    handleAddAccountModal () {
      // const person = {
      //   personPid: this.personPid
      // }
      this.$refs.AccountNewModal.showModal(this.personPid)
    },
    handleRestPasswd (record) {
      this.$refs.AccountRestModal.showModal(record)
    },
    // 添加新账号后回调
    handleAccountNewModalOk () {
      this.getAccount(this.personPid)
    }
  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
